<template>
  <van-pull-refresh v-model="loadingRefresh" @refresh="onRefresh">
    <van-list
      v-model:loading="pageLoading"
      :finished="finished"
      finished-text="没有更多了,下拉刷新页面"
      :immediate-check="false"
      @load="pageLoad"
    >
      <div class="app-container">
        <div class="anchor-head">
          <div class="anchor-head-left">
            <van-image
              round
              width="3em"
              height="3em"
              :src="anchorInfo.url"
              fit="cover"
            />
          </div>
          <div class="anchor-head-right">
            <h4>ID:{{ anchorInfo.id }}</h4>
            <p>{{ anchorInfo.name }}</p>
          </div>
        </div>
        <div class="anchor-main">
          <van-tabs v-model:active="activeName" @click-tab="onClickTab">
            <van-tab title="相册" :name="0"></van-tab>
            <van-tab title="视频" :name="1"></van-tab>
          </van-tabs>
          <div class="anchor-main-list" v-if="goodsList.length">
            <div class="list-img-box">
              <div
                class="list-img-item"
                v-for="item in goodsList"
                :key="item.h5Id"
              >
                <div class="timer-box">
                  <!-- <h4>发布时间</h4> -->
                  <span>{{ `${item.year + "-" + item.day}` }} 发布</span>
                </div>
                <AnchorItem :dateItemDetail="item" @MorePhoto="MorePhoto" />
              </div>
            </div>
          </div>
          <div class="empty-box" v-else>
            <van-empty
              image-size="80"
              description="暂无更新数据"
              v-if="isEmpty"
            />
          </div>
        </div>
      </div>
    </van-list>
  </van-pull-refresh>
</template>
<script setup>
import { computed, reactive, toRefs, ref, onMounted } from "vue";

import { useRoute } from "vue-router";
import { GetClientAnchorInfo } from "@/api/mine/index.js";

import AnchorItem from "@/components/anchorItem/index.vue";
import userOrderStore from "@/store/index.js";
let userInfo = userOrderStore();

const route = useRoute();

let activeName = ref(0);
const state = reactive({
  goodsList: [],
  paramsData: {
    pageSize: 20,
    pageNum: 1,
  },
  isEmpty: false,
});

const { goodsList, isEmpty } = toRefs(state);
let anchorInfo = ref({});
let loadingRefresh = ref(false);
const getClientAnchorInfoFn = async (type) => {
  let { pageSize, pageNum } = state.paramsData;
  let params = {
    id: route.query.id,
    code: localStorage.getItem("token"),
    pageSize,
    pageNum,
    type: activeName.value,
  };
  try {
    console.log(111);
    state.isEmpty = false;
    let data = await GetClientAnchorInfo(params);
    console.log(data.data.list, "123456");
    loadingRefresh.value = false;
    userInfo.setIsPageLoading(false);
    data.data.list.forEach((o) => {
      let timer = o.releaseTime.split(" ");
      o.photo.forEach((o3) => {
        if (o3.anchorImage.indexOf(".MP4") != -1) {
          o3.anchorImage = o3.anchorImage.replace(".MP4", ".mp4");
        }
      });
      o.year = timer[0].split("-")[0];
      o.day = timer[0].split("-")[1] + "-" + timer[0].split("-")[2];
      o.imgList =
        o.photo.length > 6
          ? o.photo.map((o1) => o1.anchorImage).slice(0, 8)
          : o.photo.map((o1) => o1.anchorImage);
    });
    state.goodsList = state.goodsList.concat(data.data.list);
    if (state.goodsList.length == data.data.pagination.total) {
      finished.value = true;
    }
    pageLoading.value = false;
    if (state.goodsList.length == 0) {
      state.isEmpty = true;
    }
  } catch (error) {
    console.log(558);
    state.isEmpty = true;
    pageLoading.value = false;
    userInfo.setIsPageLoading(false);
  }

  // console.log(connectedArray); // 输出: [1, 2, 3, 4, 5, 6]
};

const MorePhoto = (id) => {
  let i = state.goodsList.findIndex((o) => o.id == id);
  state.goodsList[i].imgList = state.goodsList[i].photo.map(
    (o1) => o1.anchorImage
  );
};

const onRefresh = () => {
  state.paramsData.pageNum = 1;
  state.goodsList = [];
  getClientAnchorInfoFn();
  loadingRefresh.value = true;
};

let pageLoading = ref(false);
let finished = ref(false);
const pageLoad = () => {
  state.paramsData.pageNum++;
  // userInfo.setIsPageLoading(true)
  getClientAnchorInfoFn();
};

const onClickTab = () => {
  state.paramsData.pageSize = 20;
  state.paramsData.pageNum = 1;
  state.goodsList = [];
  userInfo.setIsPageLoading(true);
  getClientAnchorInfoFn();
};

onMounted(() => {
  anchorInfo.value.url = route.query.url;
  anchorInfo.value.id = route.query.id;
  anchorInfo.value.name = route.query.name;
  userInfo.setIsPageLoading(true);
  getClientAnchorInfoFn();
});
</script>

<style lang="scss" scoped>
.anchor-head {
  display: flex;
  padding: 10px;
  align-items: center;
  background-color: #fff;
  border-radius: 8px;

  .anchor-head-left {
    width: 3em;
    height: 3em;
    flex: none;
  }

  .anchor-head-right {
    margin-left: 10px;
    line-height: 1;

    h4 {
      font-weight: normal;
      margin-bottom: 5px;
      color: #666;
      font-size: 14px;
    }

    p {
      font-size: 12px;
      color: #333;
    }
  }
}

.app-container {
  background: #f2f2f2;
  padding-top: 10px;
  min-height: 100vh;
}

.anchor-main {
  margin-top: 10px;
}

.anchor-main-list {
  background: #f2f2f2;
  padding: 0;

  .list-img-item {
    padding: 10px;
    margin-bottom: 10px;
    background-color: #fff;
    display: block;
  }
}

:deep(.van-grid-item__content) {
  padding: 0;
}

.timer-box {
  flex: none;
  margin-right: 10px;
  text-align: center;
  margin-bottom: 10px;

  span {
    font-size: 0.8em;
    color: #999;
  }

  h4 {
    padding-top: 10px;
    font-size: 0.8em;
    line-height: 1;
    color: #666;
  }
}

.van-image {
  border-radius: 8px;
  overflow: hidden;
}

.van-grid {
  width: 100%;
}
.empty-box {
  padding-top: 120px;
}
</style>
